<template>
  <div class="box" :class="{me:isMe}" @mouseenter="isMe=!isMe" @mouseleave="isMe=!isMe"></div>
</template>

<script>
export default {
  name: "LhzA",
  data() {
    return {
      isMe: false
    }
  }
}
</script>

<style scoped>
.box {
  width: 450px;
  height: 450px;
  background-color: #00aa00;
  text-align: center;
  position: absolute;
  top: 100px;
  left: 100px;
  transition: 500ms;
}

.me {
  transform: rotate(45deg);
}
</style>